import React from 'react';
// import  { Component } from 'react';
import './index.css';
import Introduce from '../../Common/svg/Introduce';
import Info from '../../Common/svg/Info';
import Law from '../../Common/svg/Law';

// 热点页面左边的图标
export default class HotLeftIcon extends React.Component{
    constructor(props){
        super();
        this.state={
            type:props.type,
            src:props.src,
            text:props.text,
            subtext:props.subtext,
            active:props.active
        }
    }

    UNSAFE_componentWillReceiveProps(props){
        this.setState({
            type:props.type,
            text:props.text,
            subtext:props.subtext,
            active:props.active
        })
    }
    
    render(){
        return(
            <div className="HotLeftIcon_Body">
                <div className="HotLeftIcon_Left">
                    <div className="HotLeftIcon_Img_One" style={{display:this.state.type==="1"?"block":"none"}}>
                        <Introduce width="62px" height="62px" radius="19"/>
                    </div>
                    <div className="HotLeftIcon_Img_Two" style={{display:this.state.type==="2"?"block":"none"}}>
                        <Info />
                    </div>
                    <div className="HotLeftIcon_Img_Two" style={{display:this.state.type==="3"?"block":"none"}}>
                        <Law />
                    </div>
                </div>
                <div className={this.state.active===true?"HotLeftIcon_Right HotLeftIcon_active_t":"HotLeftIcon_Right"}>
                    <div className="HotLeftIcon_Title_t">
                        <span>{this.state.text}</span>
                    </div>
                    <div className={this.state.active===true?"HotLeftIcon_Title_b HotLeftIcon_active_t":"HotLeftIcon_Title_b HotLeftIcon_noactive_t"}>{this.state.subtext}</div>
                </div>
            </div>
        )
    }
}